<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui-indexed-list.css" />
        <style type="text/css">
        .aui-indexed-list {
            position: relative;
            width: 100%;
            top: 10px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
    </style>
</head>
<body>
    <div class="aui-searchbar-wrap fixed" id="group-search" style="display: none;">
        <div class="aui-searchbar aui-border-radius" >
            <i class="aui-iconfont aui-icon-search"></i>
            <div class="aui-searchbar-text">输入首字母</div>
            <div class="aui-searchbar-input">
                <form action="javascript:search();">
                <input type="text" placeholder="输入首字母" id="aui-searchbar-input">
                </form>
            </div>
            <i class="aui-iconfont aui-icon-roundclosefill" id="aui-searchbar-clear"></i>
        </div>
        <div class="aui-searchbar-cancel aui-text-info" id="aui-searchbar-cancel">取消</div>
    </div>
    <div class="aui-indexed-list">

        <ul class="aui-list-view aui-indexed-list-view aui-in address_ul" id="group-*" data-group="*">

<!--             <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-A" data-group="A">A</li>
            <li class="aui-list-view-cell">阿拉善盟</li>
            <li class="aui-list-view-cell">安庆</li>
            <li class="aui-list-view-cell" data-tags="anyang">安阳</li>
            <li class="aui-list-view-cell" data-tags="aba">阿坝藏族羌族自治州</li>
            <li class="aui-list-view-cell" data-tags="anshun">安顺</li>
            <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-B" data-group="B">B</li>
            <li class="aui-list-view-cell" data-tags="beijing">北京</li>
            <li class="aui-list-view-cell" data-tags="baoding">保定</li>
            <li class="aui-list-view-cell" data-tags="baotou">包头</li>
            <li class="aui-list-view-cell" data-tags="benxi">本溪</li>
            <li class="aui-list-view-cell" data-tags="baishan">白山</li>
            <li class="aui-list-view-cell" data-tags="baicheng">白城</li>
            <li class="aui-list-view-cell" data-tags="haozhou">毫州</li>
            <li class="aui-list-view-cell" data-tags="binzhou">滨州</li>
            <li class="aui-list-view-cell" data-tags="binhai">滨海</li>
            <li class="aui-list-view-cell" data-tags="beihai">北海</li>
            <li class="aui-list-view-cell" data-tags="baise">百色</li>
            <li class="aui-list-view-cell" data-tags="baoshan">保山</li>
            <li class="aui-list-view-cell" data-tags="baoji">宝鸡</li>
            <li class="aui-list-view-cell" data-tags="baiyin">白银</li>
            <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-C" data-group="C">C</li>
            <li class="aui-list-view-cell" data-tags="chengde">承德</li>
            <li class="aui-list-view-cell" data-tags="cangzhou">沧州</li>
            <li class="aui-list-view-cell" data-tags="chifeng">赤峰</li>
            <li class="aui-list-view-cell" data-tags="chaoyang">朝阳</li>
            <li class="aui-list-view-cell" data-tags="cangzhou">常州</li>
            <li class="aui-list-view-cell" data-tags="chizhou">池州</li>
            <li class="aui-list-view-cell" data-tags="changsha">长沙</li>
            <li class="aui-list-view-cell" data-tags="changde">常德</li>
            <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-D" data-group="D">D</li>
            <li class="aui-list-view-cell" data-tags="datong">大同</li>
            <li class="aui-list-view-cell" data-tags="dalian">大连</li>
            <li class="aui-list-view-cell" data-tags="daqing">大庆</li>
            <li class="aui-list-view-cell" data-tags="dongying">东营</li>
            <li class="aui-list-view-cell" data-tags="dezhou">德州</li>
            <li class="aui-list-view-cell" data-tags="dongguan">东莞</li>
            <li class="aui-list-view-cell" data-tags="deyang">德阳</li>
            <li class="aui-list-view-cell" data-tags="dingxi">定西</li>
            <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-E" data-group="E">E</li>
            <li class="aui-list-view-cell" data-tags="eerduosi">鄂尔多斯</li>
            <li class="aui-list-view-cell" data-tags="ezhou">鄂州</li>
            <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-F" data-group="F">F</li>
            <li class="aui-list-view-cell" data-tags="fushun">抚顺</li>
            <li class="aui-list-view-cell" data-tags="fuxin">阜新</li>
            <li class="aui-list-view-cell" data-tags="fuzhou">福州</li>
            <li class="aui-list-view-cell" data-tags="fuzhou">抚州</li>
            <li class="aui-list-view-cell" data-tags="foshan">佛山</li> -->

        </ul>
    </div>
    <div class="aui-indexed-list-toast"></div>
    <div class="aui-indexed-list-bar">
        <a>
            <i class="aui-iconfont aui-icon-search" data-value="search"></i>
        </a>
        <a>
            <i class="aui-iconfont aui-icon-favorfill" data-value="*"></i>
        </a>
        <a data-value="A">A</a>
        <a data-value="B">B</a>
        <a data-value="C">C</a>
        <a data-value="D">D</a>
        <a data-value="E">E</a>
        <a data-value="F">F</a>
        <a data-value="G">G</a>
        <a data-value="H">H</a>
        <a data-value="I">I</a>
        <a data-value="J">J</a>
        <a data-value="K">K</a>
        <a data-value="L">L</a>
        <a data-value="M">M</a>
        <a data-value="N">N</a>
        <a data-value="O">O</a>
        <a data-value="P">P</a>
        <a data-value="Q">Q</a>
        <a data-value="R">R</a>
        <a data-value="S">S</a>
        <a data-value="T">T</a>
        <a data-value="U">U</a>
        <a data-value="V">V</a>
        <a data-value="W">W</a>
        <a data-value="X">X</a>
        <a data-value="Y">Y</a>
        <a data-value="Z">Z</a>
        <a data-value="#">#</a>
    </div>
    <script type="text/javascript" src="../script/api.js" ></script>
    <script type="text/javascript" src="../script/aui-tap.js" ></script>
    <script type="text/javascript" src="../script/aui-indexed-list.js" ></script>
    <script type="text/javascript" src="../script/zepto.js" ></script>
    <script type="text/javascript" src="../script/common.js" ></script>
    <script type="text/javascript">
        apiready = function(){
            openLoading();
            getAddress();
        };

        function getAddress() {
            api.ajax({
                url: rootPath+'/api/data/get_address',
                method: 'get',
                data: {
                    values: { 
                    },
              
                },
            }, function(ret, err) {
                if (ret) {
                    if(ret.status == 200) {
                        var arr_keys = [];
                        $.each(ret.data,function(i,v){
                            //如果是第一次出现的字母插一个头
                            if($.inArray(v.word,arr_keys) == -1) {
                                $('.address_ul').append('<li class="aui-list-view-cell aui-indexed-list-view-group" id="group-'+v.word+'" data-group="'+v.word+'">'+v.word+'</li>');
                                arr_keys.push(v.word);
                            }
                            $('.address_ul').append('<li class="aui-list-view-cell" data-tags="'+v.id+'" onclick="fnChose(this)" tapmode>'+v.name+'</li>');
                        });
                        api.parseTapmode();
                        indexedList = new auiIndexedList();
                    }
                } else {
                    api.toast({
                        msg: err.msg,
                        location : 'middle'
                    });
                }
                closeLoading();
            });
        }

        function fnChose(this_) {
            var city_id = $(this_).attr('data-tags');
            var city_name = $(this_).text();
            api.sendEvent({
                name: 'choseCityEvent',
                extra: {
                    city_id: city_id,
                    city_name : city_name 
                }
            });
            api.closeWin();
        }
    </script>
</body>
</html>